<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" 
	xmlns:of="http://omnifaces.org/functions"
	xmlns:pe="http://primefaces.org/ui/extensions"
	template="/WEB-INF/templates/template.xhtml">
	
<ui:define name="headIncludes">
	<f:event listener="#{ordemServicoBean.initializeDetail(param.numOS)}" type="preRenderView"/>
	
	<style>
		.panel300 {
			width: 300px;
		}
		.panel100 {
			width: 100px;
		}

	</style>
</ui:define>
	
	<ui:define name="pageName">Detalhe de Ordem de Serviço</ui:define>
	
	<ui:define name="buttons">
		<p:commandButton value="Cancelar OS" style="height:28px;" action="#{ordemServicoBean.openDialogConfirmCancel}" process="@this" rendered="#{ordemServicoBean.currentOrdemServico.status != 'CANCELADA'}" id="btCancelar" icon="ui-icon-cancel"/>
		<p:commandButton value="Voltar" style="height:28px;" action="#{ordemServicoBean.changeToList}" process="@this" icon="ui-icon-arrowreturnthick-1-w"/>
	</ui:define>
	
	<ui:define name="content">
	<p:panel>
		<div>
			<p:messages id="messageFormOS" autoUpdate="true" closable="true"/>
			
			<h:panelGrid columns="1" id="panelStatus">
					<h:outputText style="font-weight:bold;padding:7px;" value="Status da OS: #{ordemServicoBean.currentOrdemServico.status}" rendered="#{ordemServicoBean.currentOrdemServico.status == 'CANCELADA'}"/>				
				</h:panelGrid>
			<h:panelGrid columns="3" style="padding:5px;" id="panel1" columnClasses="panel100, panel300">
				<h:outputText style="font-weight:bold;padding:7px;" value="Número da OS" />
				<h:outputText style="font-weight:bold;padding:7px;" value="Cliente" />
				<h:outputText style="font-weight:bold;padding:7px;" value="Data de emissão" />
				
				<h:outputText style="padding:7px;" value="#{ordemServicoBean.currentOrdemServico.numOs}"/>
				<h:outputText style="padding:7px;" value="#{of:abbreviate(ordemServicoBean.currentOrdemServico.cliente.nome, 60)}"/>
				<h:outputText style="padding:7px;" value="#{ordemServicoBean.currentOrdemServico.data}">
					<f:convertDateTime pattern="dd/MM/yyyy"/>
				</h:outputText>
			</h:panelGrid>
							
			<div style="padding-top:10px; margin-left: 10px;">
				<p:dataTable var="servicoOS" rowIndexVar="rowIndex" 
					value="#{ordemServicoBean.currentOrdemServico.servicosOS}" id="tableServicosOS">  
					<p:column width="10">  
				    	<h:outputText value="#{rowIndex + 1}" />  
					</p:column>  
					
					<p:column headerText="Funcionário">  
				    	<h:outputText value="#{of:abbreviate(servicoOS.funcionario.nome, 40)}"/> 
					</p:column>
									 
					<p:column headerText="Serviço">  
				    	<h:outputText value="#{of:abbreviate(servicoOS.servico.descricao, 20)}"/>  
					</p:column>
					
					<p:column headerText="Quantidade" width="80" style="text-align:center;">
						<h:outputText value="#{servicoOS.quantidade}"/>
					</p:column>
					
					<p:column headerText="Valor unitário" width="100" style="text-align:center;">  
				    	<h:outputText value="#{servicoOS.valor}">
				    		<f:convertNumber pattern="R$ #,###,##0.00" />
				    	</h:outputText> 
					</p:column>
					<p:column headerText="Valor total" width="100" style="text-align:center;">
						<h:outputText value="#{servicoOS.total}">
							<f:convertNumber pattern="R$ #,###,##0.00" />
						</h:outputText>
					</p:column>
			  	</p:dataTable>
			</div>
			
			<h:panelGrid columns="4" style="padding:5px;" id="panelTotal">
				<h:outputText style="font-weight:bold;padding:7px;" value="Total dos serviços"/>
				<h:outputText style="font-weight:bold;padding:7px;" value="Desconto (%)"/>
				<h:outputText style="font-weight:bold;padding:7px;" value="Desconto (R$)"/>
				<h:outputText style="font-weight:bold;padding:7px;" value="Total da ordem de serviço"/>

				<h:outputText style="padding:7px;" id="inputTotalItens" value="#{ordemServicoBean.totalItensNota}">
					<f:convertNumber pattern="R$ #,###,##0.00" />
			    </h:outputText>
			    
				<h:outputText style="padding:7px;" value="#{ordemServicoBean.currentOrdemServico.descontoPercentual}">
					<f:convertNumber pattern="R$ #,###,##0.00" />
				</h:outputText>
				
				<h:outputText style="padding:7px;" value="#{ordemServicoBean.currentOrdemServico.descontoValor}">
					<f:convertNumber pattern="R$ #,###,##0.00" />
				</h:outputText>
				
				<h:outputText style="padding:7px;" value="#{ordemServicoBean.currentOrdemServico.valor}">
					<f:convertNumber pattern="R$ #,###,##0.00" />
			    </h:outputText>
			</h:panelGrid>
			
			<h:panelGrid columns="1" style="padding:5px;">
				<h:outputText style="font-weight:bold;padding:7px;" value="Condição de pagamento"/>
								
				<h:outputText style="padding:7px;" value="#{ordemServicoBean.currentOrdemServico.condicaoPagamento.condicaoPagamento}"/>
			</h:panelGrid>
			<h:inputHidden id="inputCondicaoHidden" requiredMessage="Selecione uma condição de pagamento."/>
			
			<div style="padding-top:10px; margin-left: 10px;">
				<p:dataTable emptyMessage="Não há registros" style="width:500px;"
					var="conta" rowIndexVar="index" id="tableContasReceber" value="#{ordemServicoBean.contasReceber}">						
					<p:column headerText="Parcela" style="width:100px; text-align:center;">  
				    	<h:outputText value="#{index + 1}"/>  
					</p:column>				 
					<p:column headerText="Vencimento" style="width:100px; text-align:center;">  
				    	<h:outputText value="#{conta.dataVencimento}">
							<f:convertDateTime pattern="dd/MM/yyyy"/>
						</h:outputText>  
					</p:column> 
					<p:column headerText="Valor" style="width:100px; text-align:center;">  
				    	<h:outputText value="#{conta.valor}">
			    			<f:convertNumber pattern="R$ #,###,##0.00" />
			    		</h:outputText>   
					</p:column>
					<p:column headerText="Status" width="60" style="text-align:center;">
						<h:outputText value="#{conta.status}"/>
					</p:column>
			  	</p:dataTable>
			</div>
		</div>
	</p:panel>
		
	</ui:define>
	
	<ui:define name="popups">
		<ui:include src="listCliente.xhtml"/>
		<ui:include src="listFuncionario.xhtml"/>
		<ui:include src="listServico.xhtml"/>
		<ui:include src="listCondicaoPagamento.xhtml"/>
		
		<p:dialog appendToBody="true" modal="true" closable="false" widgetVar="popupConfirmCancel"
			width="340" resizable="false" header="Confirmação" height="75">
			<h:form>
				<div style="margin-top: 10px;">
					<h:outputText value="Confirma o cancelamento da ordem de serviço?"/>
				</div>
				<div align="right" style="margin-top: 15px;">
					<p:commandButton value="Confirmar" actionListener="#{ordemServicoBean.cancelarOrdemServico}" oncomplete="popupConfirmCancel.hide()" icon="ui-icon-check"/>
					<p:commandButton value="Cancelar" onclick="popupConfirmCancel.hide()" icon="ui-icon-cancel"/>
				</div>		
			</h:form>			
		</p:dialog>
	</ui:define>
</ui:composition>